<template>
	<view class="content">
		<base-headers :isSearch="false"/>
		<!-- 文章类新闻显示 -->
		<view v-if="isVideo == 0 " class="main">
			<view class="main-title">
				{{data.title}}
			</view>
			<view class="main-time">
				{{data.createTime}}　来源: {{data.source}}
			</view>
			<view class="news-content">
				<rich-text :nodes="data.content"></rich-text>
			</view>
			<video v-if="data.video" :src="'/api'+data.video" :poster="data.image?'/api'+data.image:''"
				style="height: 450rpx; width: 710rpx; margin: 52rpx auto 0 auto;"></video>
		</view>
		<!-- 视频类新闻显示 -->
		<video-list v-else-if="videoData == 1" :isVideo="1" :videoData="data"/>
		<!-- 外链类新闻显示 -->
		<image v-else-if="isVideo == 2" :src="'/api'+data.image" style="width: 450rpx;width: 710rpx;"
			@click="go(data.outAddress)"></image>
		<!-- 推荐 -->
		<view class="theme" v-if="isVideo!=2">
			<view class="theme-header">
				<view class="theme-header-title">
					{{isVideo==0?'其他推荐':'相关推荐'}}
				</view>
				<view v-if="isVideo==1" class="theme-header-more2" @click="update">
					<image style="width: 34rpx; height: 34rpx; margin-right: 2px;" src="../../static/again.png"></image>
					换一换
				</view>
				<view v-else class="theme-header-more" @click="toUrl">
					更多
				</view>
			</view>
			<!-- 推荐内容 -->
			<view class="theme-player">
				<!-- 视频推荐内容 -->
				<view class="player-ibox" v-if="isVideo==1">
					<base-scroll-video v-if="scrollData" :isVideo="true" :scrollVideoData="videoScrollData"/>
				</view>
				<!-- 文章推荐内容 -->
				<view v-else>
					<view class="news-content-list">
						<view class="list-box" v-for="(item,index) in newsList" :key="index" @click="toNews(item.id)">
							<view class="news-point"></view>
							<view class="news-text">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<top-button :top="top"/>
	</view>

</template>

<script>
	import {
		getNavigationById,
		getNavigationContext
	} from '../../api/api';
import { debounce } from '../../utils/util';
	export default {
		data() {
			return {
				// 新闻详情数据
				data: {},
				// 视频推荐数据
				videoScrollData: [],
				// 文章推荐数据
				newsList: [],
				// 新闻详情类型 0为文章，1为视频
				isVideo: 0,
				// 请求数据的页数
				up: 1,
				// 请求数据的总数
				total: 0,
				// 判断视频数据获取是否完毕
				videoData: false,
				// 判断推荐数据获取是否完毕
				scrollData: false,
				// 距顶部距离
				top:0
			};
		},
		onPageScroll(e) {
			debounce(()=>{
				this.top = e.scrollTop
			})
		},
		onLoad(option) {
			// 获取新闻详情
			getNavigationById(option.id).then(res => {
				this.data = res.data
				this.videoData = true
				this.isVideo = res.data.articleClass
			})
			if (this.isVideo == 0) {
				// 获取文章推荐数据
				getNavigationContext({
					pageNum: 1,
					pageSize: 4,
					title: '要闻聚焦',
					id: 16896
				}).then(res => {
					this.newsList = res.data
				})
			} else {
				// 获取视频推荐数据
				getNavigationContext({
					pageNum: 1,
					pageSize: 4,
					title: '空中课堂',
					id: 22745
				}).then(res => {
					this.videoScrollData = res.data
					this.total = res.total
					this.scrollData = true
				})
			}
		},
		methods: {
			// 更多跳转
			toUrl() {
				uni.navigateTo({
					url: '../../subpages/news/news?title=要闻聚焦'
				})
			},
			// 更新视频推荐数据
			update() {
				this.scrollData = false
				this.up = this.up * 4 >= this.total ? 1 : ++this.up
				getNavigationContext({
					pageNum: this.up,
					pageSize: 4,
					title: '空中课堂',
					id: 22745
				}).then(res => {
					this.videoScrollData = res.rows
					this.scrollData = true
				})
			},
			// 跳转外部链接
			go(url) {
				window.open(url)
			},
			// 跳转文章详情
			toNews(id){
				uni.navigateTo({
					url:'/subpages/news-detail/news-detail?id='+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;

		.main {
			width: 704upx;
			margin-left: 24upx;
			margin-top: 40upx;

			.main-title {
				width: 100%;
				font-size: 34upx;
				font-family: Noto Sans S Chinese;
				font-weight: bold;
				color: #000000;
			}

			.main-time {
				font-size: 26upx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #ABABAB;
				margin-top: 20upx;
			}

			.news-content {
				margin-top: 52rpx;
				font-family: NotoSansHans-Regular;
				font-size: 28rpx;
				font-weight: 400;
				font-stretch: normal;
				line-height: 48rpx;
				letter-spacing: 0;
				color: #757575;
				box-sizing: border-box;
				img{
					width: 100%;
				}
			}
		}

		//其他推荐
		.theme {
			width: 704upx;
			height: 292upx;
			margin: 30upx 0 40upx 23upx;

			.theme-header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.theme-header-title {
					font-size: 34upx;
					font-family: Noto Sans S Chinese;
					font-weight: bold;
					color: #272727;

				}

				.theme-header-more {
					display: flex;
					align-items: center;
					font-size: 26upx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: rgb(144, 147, 153);

				}

				.theme-header-more2 {
					display: flex;
					align-items: center;
					font-size: 22upx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: rgb(144, 147, 153);

				}
			}

			.theme-player {
				margin-top: 32upx;

				.player-img {
					width: 382upx;
					height: 214upx;
					margin-right: 10upx;
					background: #281C7B;
					border-radius: 12upx;
				}

				.player-title {
					font-size: 28upx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #000000;
					line-height: 58upx;
					margin-right: 30upx;
					margin-left: 20upx;
				}

				.player-title-back {
					margin-left: 100upx;

				}

				.swiper-time {
					position: absolute;
					font-size: 46upx;
					font-family: DIN Condensed;
					font-weight: bold;
					color: #FFFFFF;
				}

				.swiper-time-box1 {
					position: absolute;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					width: 242upx;
					height: 52upx;
					top: 140upx;
					left: 10upx;
				}

				.swiper-time-box2 {
					position: absolute;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					width: 242upx;
					height: 52upx;
					top: 140upx;
					left: 400upx;
				}

				.player-iocn {
					position: absolute;
					font-size: 24upx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 44upx;
					width: 119upx;
					height: 44upx;
					background: #00D975;
					border-radius: 12upx;
					display: flex;
					justify-content: center;
					top: 0upx;
					left: 10upx;
				}

				.icon-right {
					left: 400upx;
				}

				.news-content-list {
					width: 100%;
				}

				.list-box {
					display: flex;
					align-items: center;
				}

				.news-point {
					width: 6rpx;
					height: 6rpx;
					background-color: #ba0825;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.news-text {
					font-family: NotoSansHans-Light;
					font-size: 28rpx;
					font-weight: 400;
					font-stretch: normal;
					line-height: 68rpx;
					letter-spacing: 0;
					color: #272727;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>
